<template>
  <div>
    <alert-box data-title="一键换厂" :isCloseType="false" @close="close">
      <div class="current">
        当前：
      </div>
      <div :class="['tips row',closeOperate?'displayNo':'']">
        <div>
          当前共<span class="tips-numbers">{{ renewalManufactory.length }}</span>人，派遣单位<span
          class="tips-numbers">{{
            renewalManufactory.map(
              item => item.serveCompanyName).filter(function (item, index) {
              return renewalManufactory.map(
                item => item.serveCompanyName).indexOf(item) === index;
            }).length
          }}</span>个，工种<span
          class="tips-numbers">{{
            renewalManufactory.map(
              item => item.occupationName).filter(function (item, index) {
              return renewalManufactory.map(
                item => item.occupationName).indexOf(item) === index;
            }).length
          }}</span>个。
        </div>
        <div class="wrong-number" @click="closeTips">
          x
        </div>
      </div>
      <div class="personnel-list">
        <div class="personnel-box">
          <el-table
            :data="renewalManufactory"
            style="width: 100%"
            :header-row-style="{ color: '#202536' }"
            :row-style="{ color: '#5E617D' }"
            @selection-change="handleSelectionChangeOne"
            ref="tableScroll"
          >
            <!--                        v-loadmore="loadMorePerson"
            -->
            <el-table-column class="card-no" prop="userName,idCardNo" reserve-selection label="姓名/身份证">
              <template v-slot="scope">
                {{ scope.row.userName }}/{{ scope.row.idCardNo }}
              </template>
            </el-table-column>
            <el-table-column
              width="320px"
              prop="serveCompanyName" reserve-selection
              label="被派遣单位"
            />
            <el-table-column label="工种" prop="occupationName" reserve-selection width="140px">

            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="bottom-content">
        <div class="change">
          更换至：
        </div>
        <div class="input-list">
          <div class="list-row">
            <div class="list-date">
              <span class="list-characteristic">* </span>生效日期
            </div>
            <el-date-picker disabled @change="changePicker" v-model="valueOne" type="date"
                            placeholder="第二天"
                            prefix-icon="el-icon-caret-bottom"
                            clear-icon="true"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
          </div>
          <div class="list-row">
            <div class="list-date">
              <span class="list-characteristic">* </span>被派遣单位
            </div>
            <!--            v-model="dateTwo"-->
            <el-select v-model="companyDetailId" filterable placeholder="选择派遣单位" class="screen-i search-type"
                       prefix-icon="el-icon-caret-bottom"
                       @click="getCompanyDetailList" @change="onSelectCompany()">
              <el-option v-for="(item, index) in companyDetailList" v-bind:key="index"
                         :label="item.serveCompanyName" :value="item.serveCompanyId"/>
            </el-select>
          </div>
          <div class="list-row">
            <div class="list-date">
              <span class="list-characteristic">* </span>工种
            </div>
            <el-select v-model="workTypeId" filterable placeholder="选择工种" prefix-icon="el-icon-caret-bottom"
                       class="screen-i search-type">
              <el-option v-for="(item, index) in workTypeList" v-bind:key="index"
                         :label="item.name + '(' + item.level + '类)'" :value="item.id"/>
            </el-select>
          </div>
        </div>
      </div>
      <div class="step">
        <button class="next-step" @click="nextStepEvent">
          确定
        </button>
      </div>
    </alert-box>
  </div>
</template>

<script setup lang="ts">
import alertBox from '@/components/alert-box.vue'
import { defineProps, ref, defineEmits, toRef, toRefs, onMounted, getCurrentInstance } from 'vue'
import { disposableTransposing, disposableTransposingArr, getDispatchList, oneKeyInsteadFactory } from '@/api/long-insure'
import { number } from 'echarts'
import { ElMessage } from 'element-plus'
import { dateFormat } from '../utils/util'

const workTypeList = ref([] as any[])
const companyDetailId = ref('')
const substitution = ref()
// 定义时间加86400000 的意思加了一天
const day = ref(new Date(new Date().getTime() + 86400000))
const valueOne = dateFormat('YYYY-mm-dd', day.value)
console.log(valueOne, 'valueOne')

// 接收父组件传过来的 数组
const a = defineProps(['renewalManufactory'])
// 解构然后用toRefs转换为响应式
const { renewalManufactory } = toRefs(a)

const someData = renewalManufactory.value.filter((item: any, index: number) => index > 9)
console.log(someData, 'someDatasomeData')
console.log(renewalManufactory, '子组件的数据是啥')
const isFactory = ref(false)

// 子组件定义一个发送的关闭事件  事件名称为close
const emit = defineEmits(['close'])
const companyDetailList = ref([] as any)
// 工种id
const workTypeId = ref('')
// 服务公司名称
const serveCompanyName = ref('')
const content = ref()
// 小红框提示的弹出窗口
const closeOperate = ref(false)
// 获取派遣单位详细信息
const getCompanyDetailList = async () => {
    const result = await getDispatchList({
        pageNum: 1,
        pageSize: 900,
        status: 1,
        isGetFile: 1,
        searchText: ''
    })
    companyDetailList.value = result.list
}

// 选择派遣单位
const onSelectCompany = () => {
    // this.workTypeList =
    console.log(companyDetailId.value, 'companyDetailIdcompanyDetailIdcompanyDetailId')
    const arr: any = companyDetailList.value.filter(
        (item: {
      serveCompanyId: string | number
      occupationList: any
    }) => {
            if (item.serveCompanyId === companyDetailId.value) {
                return item
            }
        }
    )
    workTypeList.value = arr[0].occupationList
    workTypeId.value = ''
    serveCompanyName.value = arr[0].serveCompanyName
    console.log(workTypeId, 'workTypeIdworkTypeIdworkTypeIdworkTypeId')
}

const closeTips = () => {
    closeOperate.value = true
}
// 传给父组件接口操作。
const close = function () {
    // eslint-disable-next-line vue/no-mutating-props
    emit('close', isFactory.value)
}

// 滚动事件
const instance = getCurrentInstance()
console.log(instance, 'proxyproxy')
onMounted(() => {
    // const scrollEvent = $ref
    // console.log(scrollEvent, 'scrollEventscrollEvent')
    // proxy.$refs.tableScroll.bodyWrapper.addEventListener('scroll', (res: any) => {
    // console.log(tableScroll.value.bodyWrapper, 'res是什么内容！')

})

// console.log(tableScroll, 'tableScrolltableScroll')
const changePicker = (e: any) => {
    console.log(e, 'eeeeeeeeeee的值是啥')
}

const value = ref()

// 在这里增加页数调用接口
const loadMorePerson = (e: any) => {
    console.log(e, 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee')
}

const nextStepEvent = async () => {
    console.log(companyDetailId.value, 'companyDetailId.valuecompanyDetailId.valuecompanyDetailId.value')
    console.log(renewalManufactory.value, '222222222222222222222222222221111111111111')
    if (renewalManufactory.value.length < 1) {
    // $message.error('请添加操作人')
        ElMessage({
            type: 'error',
            message: '请添加操作人！'
        })
        return
    }
    // eslint-disable-next-line eqeqeq
    if (companyDetailId.value === '' || undefined) {
        ElMessage({
            type: 'error',
            message: '请选择派遣单位！'
        })
        return
    }
    if (workTypeId.value === '') {
        ElMessage({
            type: 'error',
            message: '请选择工种！'
        })
        return
    }
    content.value = workTypeList.value.filter((item: any) => item.id === workTypeId.value)
    console.log(content.value, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')

    substitution.value = JSON.parse(JSON.stringify(renewalManufactory.value))
    // 循环拿到一个新的数组
    substitution.value = substitution.value.map((item: any) => {
        item.serveCompanyId = companyDetailId.value
        item.occupationId = workTypeId.value
        item.serveCompanyName = serveCompanyName.value
        item.occupationName = content.value[0].name
        // item.insurStartDay = valueOne
        return item
    })
    console.log(substitution.value, '1111111111111111111111111111')
    console.log(renewalManufactory.value, '22222222222222222222222222222000000000')
    const result = await oneKeyInsteadFactory({
        insurStartDay: valueOne,
        staffList:
    substitution.value
    })
    ElMessage({
        type: 'success',
        message: result.msg
    })
  // eslint-disable-next-line no-unused-expressions
  instance?.proxy?.$Bus.emit('close2', '关闭了吗')
}

// 原文链接：https://blog.csdn.net/Pure_White520/article/details/124683998
</script>
<style lang="stylus" scoped>
.current {
  font-size: 16px;
  font-family: PingFangTC-Medium, PingFangTC;
  font-weight: 600;
  color: #000000;
  line-height: 16px;
  margin 0 0 24px 24px;
}

.tips {
  height: 40px;
  background: rgba(255, 126, 104, 0.1);
  line-height 40px;
  padding 0 16px 0 24px;
  box-sizing border-box;
}

.tips-numbers {
  color #FF7E68;
}

.wrong-number {
  color #9DA0A9;
}

.personnel-list {
  background: #F5F5F7;
  padding 16px 24px;
  box-sizing border-box;
}

.personnel-box {
  background #FFFFFF;
  padding 16px 24px;
  box-sizing border-box;
  overflow-y scroll;
  height 400px;
}

.bottom-content {
  padding 24px;
  box-sizing border-box;
}

.change {
  font-size 16px;
  font-weight: 600;
  color: #000000;
  line-height: 16px;
}

.list-date {
  font-weight 600;
  font-size 16px;
}

.list-characteristic {
  color #FF7E68;
  margin-top 5px;
}

.list-row {
  display flex;
  align-items center;
  justify-content space-between;
  padding-top 24px;
}

.list-row ::v-deep .el-input__prefix {
  left auto;
  right 5px;
}

.list-row ::v-deep .el-input--prefix .el-input__inner {
  padding-left: 10px;
}

.input-list {
  padding: 0 43px;
}

.list-row ::v-deep .el-date-editor--date, .el-select, .el-input {
  width 82%;
}

.step {
  display flex;
  justify-content center;
}

.next-step {
  width: 74px;
  height: 32px;
  background: #1989FA;
  border none;
  color #FFF;
  border-radius 3px;
  text-align center;
  margin-bottom: 24px;
}

.displayNo {
  display none;
}
</style>
